<script setup lang="ts">
import Taro from "@tarojs/taro";
import ByIcon from "./ByIcon.vue";
import ByText from "./ByText.vue";

defineProps<{
  placeholder?: string;

  tag?: string;
}>();

const emits = defineEmits<{
  confirm: [string?];
  close: [];
  remove: [];
}>();

const value = defineModel<string>();

const handleClear = () => {
  value.value = "";
  emits("close");
};

// 胶囊几何信息
const buttonInfo = Taro.getMenuButtonBoundingClientRect();
</script>

<template>
  <view
    class="flex items-center bg-white/60 px-3 rounded-full"
  >
    <ByIcon name="Search" :size="36" color="#999" />

    <view
      v-if="!!tag"
      class="inline-flex py-0.5 mx-1 whitespace-nowrap items-center bg-main px-2 rounded-full text-[#C5FF10]"
    >
      <ByText truncated class="!max-w-[6em] text-sm">{{tag}}</ByText>
      <ByIcon
        name="Close"
        :size="26"
        color="#888"
        class="ml-1"
        @tap="$emit('remove')"
      />
    </view>

    <input
      v-model="value"
      class="ml-3 flex-auto"
      :placeholder="!tag ? placeholder : ''"
      @confirm="$emit('confirm', value)"
      :style="{height: buttonInfo.height + 'px'}"
    />
    <ByIcon
      v-show="value"
      name="Close"
      :size="36"
      color="#666"
      class="ml-1"
      @tap="handleClear"
    />
  </view>
</template>
